<!--横向柱形-->
<template>
    <div class="chartLiney" :style="'height:' + (config.height || '310px;')">
		  <chart :options="liney" ref="liney" auto-resize/>
    </div>
</template>

<script>
import '@/util/utils'
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/line";
import 'zrender/lib/svg/svg';
let echarts1 = require("echarts/lib/echarts");
export default {
    name: "chartLiney",
    components: {
        chart: Echarts
    },
    props: {
        config:{
            type:Object,
            default:()=>{}
        },
        lineData: {
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
          liney: {
            tooltip: {
                show: false
            },
            grid: {
              left: '2%',
              right: '3%',
              top: '0',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLine: {//x轴线的样式
                lineStyle: {
                  type: 'solid',
                  color: '#ccc',//线的颜色
                  width:'0'//坐标线的宽度
                }
              },
              axisLabel:{//x字体样式
                show: true,
                textStyle: {
                  color:'#9B9B9B',
                  fontWeight: 300 ,
                  fontSize: 12 //文字的字体大小
                }
              },
              axisTick: { //取消刻度线
                show: false
              },
              splitNumber: 5,
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#EFF0F6",
                  type: 'solid',
                  width:'1'
                }
              }
            },
            yAxis: {
              type: 'category',
              data: [],
              axisLine: {//y轴线的样式
                lineStyle: {
                  type: 'solid',
                  color: '#EFF0F6',//线的颜色
                  width:'1'//坐标线的宽度
                }
              },
              axisLabel:{//y字体样式
                show: true,
                textStyle: {
                  color:'#555555',
                  fontWeight: 300 ,
                  fontSize : 14 //文字的字体大小
                }
              },
              axisTick : { //取消刻度线
                show : false
              },
              splitLine: {
                show: false
              },
              axisPointer: {
                  type: "none"
              }
            },
            series: [
              {
                name: this.config.seriyName || '',
                type: 'bar',
                barWidth: '6px',
                itemStyle: {
                  normal: {
                    color: new echarts1.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0, color: this.config.colors[0][0]
                    }, {
                        offset: 1, color:  this.config.colors[0][1]
                    }], false),
                    barBorderRadius:[5,5,5,5]
                  }
                },
                data: []
              }
            ]
          }   
        };
    },
    created() {

    },
    mounted() {
        this.$nextTick(() => {
            this.init()
        })
    },
    methods: {
        init(){
            this.setLine()
        },  
        setLine(){
            let self = this
            this.$refs.liney.clear()
            this.$nextTick(()=>{
                if("tooltip" in this.config){
                    this.liney.tooltip = this.config.tooltip;
                }
                this.liney.yAxis.data = [];
                this.liney.series[0].data = [];
                if(this.lineData.length){
                  for(let i=0;i<this.lineData.length;i++){
                    let _line = this.lineData[i];
                    this.liney.yAxis.data.push(_line.y || '-');
                    this.liney.series[0].data.push(_line.value || 0);
                  }
                }
            })
        },
    },
    watch: {
        lineData(newVal){
            if(newVal){
                this.setLine()
            }
        }
    }
};
</script>

<style lang="scss">
.chartLiney {
  min-height: 310px;
  width: 100%;
  margin: 0;
  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
